<template>
  <div>
    <!-- 搜索表单 -->
    <!-- 查询表单 -->
    <el-form :inline="true">
      <el-form-item>
        <el-input placeholder="请输入医生名称" v-model="keyWord" clearable>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <div style="float: right">
        <el-form-item>
          <el-button type="info">已禁用人数{{ disabledNum }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="showAddDlg">添加医生</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 表格 -->
    <el-table :data="pageTicket" border>
      <el-table-column prop="id" label="id" width="100"> </el-table-column>
      <el-table-column prop="trueName" label="姓名" width="110">
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="100"> </el-table-column>
      <el-table-column prop="sex" label="性别" width="100"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="departmentName" label="科室"> </el-table-column>
      <el-table-column prop="rank" label="级别"> </el-table-column>
      <el-table-column
        prop="createTime"
        label="加入时间"
        :formatter="dateForma"
      >
      </el-table-column>
      <el-table-column label="是否禁用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="turnStatus(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showEditDlg(scope.row)">
            <font-awesome-icon :icon="['fas', 'edit']" style="font-size: 18px"
          /></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-row>
      <el-col style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentpage"
          :page-size="pagesize"
          layout="prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 添加弹出层 -->
    <el-dialog title="添加医生" :visible.sync="dialogAddVisible">
      <el-form :model="add_form" :rules="rules" ref="addForm">
        <el-form-item label="姓名" prop="trueName" label-width="120px">
          <el-input v-model="add_form.trueName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="科室" prop="departmentId" label-width="120px">
          <el-select v-model="add_form.departmentId" placeholder="请选择科室"
            ><el-option
              v-for="item in depts"
              :key="item.did"
              :label="item.departmentName"
              :value="item.did"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="级别" prop="rank" label-width="120px">
          <el-select v-model="add_form.rank" placeholder="-请选择级别-">
            <el-option
              v-for="item in ranks"
              :key="item.rid"
              :label="item.titleLevel"
              :value="item.titleLevel"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" label-width="120px">
          <el-input v-model="add_form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age" label-width="120px">
          <el-input-number
            v-model="add_form.age"
            :min="1"
            :max="120"
            label="年龄"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="职务" prop="type" label-width="120px"
          ><el-radio-group v-model="add_form.type" size="small">
            <el-radio
              :label="item.id"
              border
              v-for="item in radios"
              :key="item.id"
              >{{ item.title }}</el-radio
            >
          </el-radio-group></el-form-item
        >
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add">添 加</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹出层 -->
    <el-dialog title="编辑医生" :visible.sync="dialogFormVisible">
      <el-form
        :model="edit_form"
        size="mini"
        ref="editForm"
        class="edit-form"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12"
            ><el-form-item label="姓名" label-width="120px" prop="trueName">
              <el-input
                v-model="edit_form.trueName"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="性别" label-width="120px" prop="sex">
              <el-radio-group v-model="edit_form.sex">
                <el-radio-button label="1">男</el-radio-button>
                <el-radio-button label="2">女</el-radio-button>
              </el-radio-group>
            </el-form-item></el-col
          >
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号" label-width="120px" prop="phone">
              <el-input
                v-model="edit_form.phone"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="年龄" label-width="120px" prop="age">
              <el-input
                v-model="edit_form.age"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>

        <el-row>
          <el-col :span="12"
            ><el-form-item label="重置" label-width="120px">
              <el-button type="primary" @click="reset">重置密码</el-button>
            </el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="科室" label-width="120px" prop="departmentId">
              <el-select
                v-model="edit_form.departmentId"
                placeholder="请选择科室"
              >
                <el-option
                  v-for="item in depts"
                  :key="item.did"
                  :label="item.departmentName"
                  :value="item.did"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span = '12'></el-col>
          <el-col :span = '12'></el-col>
        </el-row> -->

        <el-form-item label="级别" label-width="120px" prop="rid">
          <el-select v-model="edit_form.rid" placeholder="-请选择科室-">
            <el-option
              v-for="item in ranks"
              :key="item.rid"
              :label="item.titleLevel"
              :value="item.rid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务" prop="type" label-width="120px">
          <el-radio-group v-model="edit_form.type" size="small">
            <el-radio
              :label="item.id"
              border
              v-for="item in radios"
              :value="item.id"
              :key="item.id"
              >{{ item.title }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="擅长" prop="strong" label-width="120px">
          <el-input type="textarea" v-model="edit_form.strong">
          </el-input> </el-form-item
        ><el-form-item label="介绍" prop="introduction" label-width="120px">
          <el-input type="textarea" v-model="edit_form.introduction">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="HandleEdit()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 表格数据 -->

    <!-- 分页 -->
  </div>
</template>

<script>
  import {
    list,
    like,
    add,
    getById,
    modify,
    resetPswd,
  } from '../../api/doctor-manage/api'
  import { list_ag } from '../../api/auth-group/api'
  import { list_dept } from '../../api/department/api'
  import { modify_mb, disable_status } from '../../api/member/api'
  import { list as listRank } from '@/api/hosp-doctor/api'
  import moment from 'moment'

  export default {
    data() {
      return {
        add_form: {
          trueName: '',
          departmentId: '',
          rank: '',
          type: '',
          phone: '',
          age: '',
        },
        depts: [],
        rules: {
          trueName: [
            { required: true, message: '请填写姓名', trigger: 'blur' },
          ],
          departmentId: [
            { required: true, message: '请填写部门', trigger: 'blur' },
          ],

          rank: [{ required: true, message: '请填写级别', trigger: 'blur' }],
          rid: [{ required: true, message: '请填写级别', trigger: 'blur' }],
          phone: [
            { required: true, message: '请填写电话号码', trigger: 'blur' },
            { min: 11, max: 11, message: '格式不正确', trigger: 'blur' },
          ],
          age: [{ required: true, message: '请填写年龄', trigger: 'blur' }],
          type: [{ required: true, message: '请填写职务', trigger: 'blur' }],

          strong: [{ required: true, message: '请填写擅长', trigger: 'blur' }],
          introduction: [
            { required: true, message: '请填写介绍', trigger: 'blur' },
          ],
          sex: [{ required: true, message: '请填写性别', trigger: 'blur' }],
        },
        radios: [],
        ranks: [],
        edit_form: {},
        keyWord: '',
        input: '',
        // 禁用人数
        disabledNum: 0,
        total: 10, //总数据条数
        currentpage: 1, //当前所在页默认是第一页
        pagesize: 4, //每页显示多少行数据 默认设置为10
        pageTicket: [], //分页后的当前页数据
        dialogFormVisible: false, //控制编辑弹出层显示
        dialogAddVisible: false, //控制详情弹出层显示
      }
    },
    watch: {},
    mounted() {
      this.getTicket(1)
      this.setDisableNum()
    },
    methods: {
      // 重设密码
      reset() {
        resetPswd(this.edit_form.uid).then((res) => {
          if (res.data) {
            this.$message.success('密码已重置,为手机号后六位')
          }
        })
      },

      // 加载下拉框以及单选框
      randerDeptType() {
        let that = this
        // 科室
        list_dept().then((resp) => {
          that.depts = resp.data
        })
        // 职务
        list_ag().then((resp) => {
          that.radios = resp.data
        })
        // 级别
        listRank().then((res) => {
          this.ranks = res.data
        })
      },

      showAddDlg() {
        this.dialogAddVisible = true
        // 渲染科室，级别下拉框 ，职务
        this.randerDeptType()
      },
      // 添加医生
      add() {
        // console.log(this.add_form)
        this.$refs['addForm'].validate((valid) => {
          if (valid) {
            add(this.add_form).then((resp) => {
              this.$message.success('添加成功')
              this.dialogAddVisible = false
              this.getTicket(1)
            })
          } else {
            this.$message.error('请填写完整')

            return false
          }
        })
      },
      // 搜索按钮事件
      onSubmit() {
        this.getSearchTicket(1)
      },
      getSearchTicket(currentPage) {
        let that = this

        like({
          keyWord: this.keyWord,
          currentPage: currentPage,
          pageSize: this.pagesize,
        })
          .then(function (response) {
            // console.log(response)
            let data = response.data.list
            that.fmtData(data)
            that.currentpage = response.pageNum
            that.pageTicket = data
            //获取返回记录的总行数
            that.total = response.data.data.total
            //获取当前页的数据
          })
          .catch(function (error) {
            console.log(error)
          })
      },

      // 获取当前页面数据
      getTicket(page) {
        let that = this
        list({
          currentPage: page,
          pageSize: that.pagesize,
        })
          .then(function (response) {
            let data = response.data.list
            that.fmtData(data)

            that.currentpage = response.data.pageNum
            that.pageTicket = data
            //获取返回记录的总行数
            that.total = response.data.total
            //获取当前页的数据
          })
          .catch(function (error) {
            console.log(error)
          })
      },

      fmtData(data) {
        data.forEach((element) => {
          if (element.status === 1) {
            element.status = true
          } else {
            element.status = false
          }
          if (element.sex === 1) {
            element.sex = '男'
          } else {
            element.sex = '女'
          }
          element.createTime = element.createTime
        })
      },
      //时间格式化转换7
      dateForma: function (row, column, data) {
        // console.log(data)
        return moment.unix(data).format('YYYY-MM-DD ')
      },

      // 页码变化
      handleSizeChange(size) {
        //修改当前每页的数据行数
        this.pagesize = size
      },
      //调整当前的页码
      handleCurrentChange(val) {
        console.log('页码变化了', val)
        //修改当前的页码
        //数据重新分页
        if (this.keyWord != '') {
          console.log('dfdas')
          this.getSearchTicket(val)
        }
        this.getTicket(val)
      },
      //编辑弹出
      showEditDlg({ id }) {
        this.randerDeptType()

        // console.log(id);
        getById(id).then((res) => {
          // console.log(res)
          this.edit_form = res.data
        })
        this.dialogFormVisible = true
      },
      // 编辑
      HandleEdit() {
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            modify(this.edit_form).then((res) => {
              this.$message.success('修改成功')
              this.getTicket()
              this.dialogFormVisible = false
            })
          } else {
            this.$message.error('请填写完整')

            return false
          }
        })
        console.log(this.edit_form)

        // this.$refs[editForm].resetFields()//重置表单数据
      },
      // 禁用开关回调
      turnStatus(rowData) {
        // TODO 改变状态
        // console.log(rowData)
        let state = rowData.status ? 1 : 2
        const data = { uid: rowData.uid, status: state }
        modify_mb(data).then((res) => {
          if (rowData.status) {
            this.$message.success('已解禁')
            this.setDisableNum()
          } else {
            this.$message.success('已禁用')
            this.setDisableNum()
          }
        })
      },
      setDisableNum() {
        disable_status().then((res) => (this.disabledNum = res.data))
      },
    },
  }
</script>

<style lang="css" scoped>
  .el-radio {
    margin-right: 0;
  }
  .edit-form {
    margin-right: 80px;
  }
</style>
